<template>
    <div class="user">
        <div class="user-center">
                <div class="user-center-top center" @click="toLogin">
                    <img src="../../assets/img/my-photo.png" alt="">
                    <div class="wcolor">{{userInfo.mobile}}</div>
                </div>
                <div class="user-center-order center">
                    <div class="movie-order center">
                        <img src="../../assets/img/my-detail.png" alt="">
                        <div class="fz12">电影订单</div>
                    </div>
                    <div class="item-order center">
                        <img src="../../assets/img/my-order.png" alt="">
                        <div class="fz12">商品订单</div>
                    </div>
                </div>
                <div class="user-center-sort ">
                    <div class="sort-item spaceBetween" v-for="(item,index) in list" :key="index">
                        <div class="sort-item-left">
                            <img :src="item.imgSrc" alt="">
                            <span>{{item.title}}</span>
                        </div>
                        <div class="sort-item-right">
                            <span v-if="item.rest">￥{{item.cash}}</span>
                            <img src="../../assets/img/my-right.png" alt="">
                        </div>
                    </div>
                </div>
            </div> 
          <bottom-bar></bottom-bar>
    </div>
</template>

<script>
import BottomBar from '../../components/BottomBar/BottomBar.vue';

export default {
    name:"center",
    data(){
        return{
            list:[
                {
                    imgSrc:require('../../assets/img/my-card.png'),
                    title:"卖座券",
                    rest:false,
                },
                {
                    imgSrc:require('../../assets/img/my-packet.png'),
                    title:"组合红包",
                    rest:false,
                },
                {
                    imgSrc:require('../../assets/img/my-balance.png'),
                    title:"余额",
                    cash:0,
                    rest:true,
                },
                {
                    imgSrc:require('../../assets/img/my-set.png'),
                    title:"设置",
                    rest:false,
                },
               
            ]
        }
    },
    computed:{
        userInfo(){
            return this.$store.state.userInfo||JSON.parse(sessionStorage.getItem("userInfo"))||{mobile:'立即登录'};
        }
    },
    components:{
        "bottom-bar":BottomBar,
    },
    methods:{
        toLogin(){
         
            if(this.userInfo.mobile=="立即登录"){
                console.log(this.userInfo);
                this.$router.push({
                    name:"login"
                })
            }else{
                this.$router.push({
                    name:"personalInfo"
                })
            }
        }
    }
    
}
</script>

<style scoped lang="scss">
 .user{
     display: flex;
     flex-direction: column;
     height: 100%;

     &-center{
         background-color: rgb(244,244,244);
         flex-grow: 1;

         &-top{
             width: 100%;
             height: 160px;
             background: url('../../assets/images/center-top-bgi.png');
             justify-content: left;
             img{
                 width: 64px;
                 height: 64px;
                 border-radius: 50%;
                 margin:0 20px;
             }
         }
         &-order{
             background-color: #fff;
             justify-content: space-around;
             height: 80px;
             padding: 10px 0;
             .movie-order{
                 flex:1;
                 flex-direction: column;
                 img{
                     margin-top: 3px;
                 }
             }
             .item-order{
                 flex:1;
                 flex-direction: column;
                 img{
                     margin-top: 3px;
                 }
             }
             img{
                 width: 26px;
                 height: 26px;
             }
         }
         &-sort{
             margin-top: 15px;
             .sort-item{
                 background-color: #fff;
                 padding: 8px;
                border-bottom: 1px solid #ededed;
             }
             .sort-item-left{
                 display: flex;
                 img{
                     margin-right: 15px;
                 }
             }
             .sort-item-right{
                 display: flex;
                 align-items: center;
                 img{
                     width: 15px;
                     height: 15px;
                 }
             }
            img{
                width: 20px;
                height: 20px;
            }
             
         }
     }
     bottom-bar{
         flex-shrink: 0;
         height: 42px;
     }
 }
</style>